<template>
	<view class="container fonts">
		<u-top-tips ref="uTips"></u-top-tips>
		<view class="column" hover-class="touch" hover-start-time="0" hover-stay-time="300" @tap="cancel">
			<u-icon name="account-fill"></u-icon>
			家长
		</view>
		<view class="column" hover-class="touch" hover-start-time="0" hover-stay-time="300" @tap="expert">
			<u-icon name="plus-people-fill"></u-icon>
			专家
		</view>
		<!-- <view class="column" hover-class="touch" hover-start-time="0" hover-stay-time="300" @tap="merchant">
			<u-icon name="home-fill"></u-icon>
			机构
		</view>
		<text @tap="toProtocol">机构协议</text> -->
		<u-popup v-model="show" mode="bottom" border-radius="20" :closeable="true">
			<scroll-view class="scroll" :scroll-y="true">
				<view v-for="(item, index) in protocol" :key="index">{{ item }}</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			disabled: true,
			protocol: [],
			show: false,
		}
	},
	onLoad() {
		this.$post(this.api.getProfile, {}).then((data) => {
			this.protocol = data.merchantProtocol.split('\n')
		})
	},
	methods: {
		cancel: function () {
			this.$post(this.api.applyCancel, { deviceUuid: this.deviceUuid })
				.then(() => {
					this.$Router.pushTab({ name: 'topic' })
				})
				.catch(() => {
					this.$refs.uTips.show({
						title: '网络异常',
						type: 'warning',
						duration: '2000',
					})
				})
		},
		expert: function () {
			this.$Router.push({ name: 'addExpert' })
		},
		merchant: function () {
			this.$Router.push({ name: 'addMerchant' })
		},
		toProtocol: function () {
			this.show = true
		},
	},
}
</script>

<style scoped lang="stylus">
.container
	width 100vw
	height 100vh
	background white
	display flex
	flex-direction column
	justify-content center
	align-items center

	.column
		width 500rpx
		height 130rpx
		background #fdcb65
		border-radius 80rpx
		font-size 50rpx
		color #fff
		letter-spacing 0.5em
		margin 50rpx 0
		display flex
		justify-content center
		align-items center
		transition all 0.3s

		text
			font-size 30rpx

	.scroll
		height 60vh
		padding 40rpx
		box-sizing border-box
		line-height 1.5
</style>
